<extend name="admin/main"/>

<block name="title">
    <title>添加用户</title>
</block>

<block name="css">
</block>

<block name="heading">添加用户</block>

<block name="content">
    <div class="col-md-offset-4 col-md-4">
        <div class="panel panel-default" style="visibility: visible">
            <div class="panel-heading">
                ADD USERS
            </div>
            <div class="panel-body">
                <form class="form-horizontal" id="register_post_2">
                    <div class="form-group mb-md">
                        <label for="username" class=" control-label">用户名</label>
                        <div>
                            <input type="text" class="form-control" id="username" required>
                            <span class="text-danger" id="username_error"></span>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <label for="Email" class="control-label">邮箱</label>
                        <div>
                            <input type="text" class="form-control" id="email" required>
                            <span class="text-danger" id="email_error"></span>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <label for="Password" control-label">密码</label>
                        <div>
                            <input type="password" class="form-control" id="password" required>
                            <span class="text-danger" id="password_error"></span>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <label for="password_c" class="control-label">确认密码</label>
                        <div>
                            <input type="password" class="form-control" id="password_c" required>
                            <span class="text-danger" id="password_c_error"></span>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <label for="age" class="control-label">年龄</label>
                        <div>
                            <input type="tel" class="form-control" id="age" required>
                            <span class="text-danger" id="age_error"></span>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <label for="avatar" class="control-label">头像</label>
                        <div>
                            <input type="file" class="form-control" id="avatar" required>
                            <span class="text-danger" id="avatar_error"></span>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <label class="control-label">性别</label>
                        <div>
                            <label class="control-label">
                                <input type="radio" name="sex" value="1" checked>男
                            </label>
                            <label class="control-label">
                                <input type="radio" name="sex" value="0">女
                            </label>
                        </div>
                    </div>
                    <div class="form-group mb-md">
                        <button class="btn btn-success" type="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</block>

<block name="js">
    <script type="text/javascript" src="__PUBLIC__/assets/demo/demo.js"></script>
    <script type="text/javascript" src="__PUBLIC__/assets/demo/demo-switcher.js"></script>
    <script src="__PUBLIC__/assets/plugins/bootbox/bootbox.js"></script>
    <script>
        $(document).ready(function () {
            $('#register_post_2').submit(function (e) {
                e.preventDefault();
                submit();
            });
        });

        function submit() {
            reset();
            var data = getData();
            if (data === false) {
                return 0;
            }
            axios.post('/admin/user/insertUser', data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                .then(function (res) {
                    if (res.data.success === false) {
                        if (res.data.code === 2000) {
                            for (var key in res.data.data) {
                                showError(key, res.data.data[key]);
                            }
                        }
                    } else {
                        bootbox.confirm('注册成功', function (res) {
                            if (res === true) {
                                window.location.reload();
                            }
                        });
                    }
                });
        }

        function reset() {
            var div = $('.has-error');
            div.each(function (key, value) {
                var em = $(value);
                em.removeClass('has-error');
                em.children('span').text('');
            });
        }

        function getData() {
            var username = $('#username');
            var password = $('#password');
            var password_c = $('#password_c');
            var email = $('#email');
            var age = $('#age');
            var avatar = $('#avatar');
            var sex = $('input[type="radio"][checked]');
            var error = null;
            if (username.val().length < 4) {
                error = showError('username', '用户名过短，至少需要4个字节');
            }

            if (password.val().length < 6) {
                error = showError('password', '密码过短，至少需要6个字节');
            }

            if (password.val() !== password_c.val()) {
                error = showError('password_c', '密码不一致');
            }
            var _age = parseInt(age.val());

            if (isNaN(_age) || _age <= 0 || _age > 200) {
                error = showError('age', '年龄必须大于0, 小于200');
            }
            if (error !== null) {
                return false;
            }

            var data = new FormData();
            data.append('username', username.val());
            data.append('email', email.val());
            data.append('password', password.val());
            data.append('password_c', password_c.val());
            data.append('age', age.val());
            data.append('avatar', avatar[0].files[0]);
            data.append('sex', sex.val());
            return data;
        }

        function showError($name, $message) {
            var error = $('#' + $name + '_error');
            error.parent('div').addClass('has-error');
            error.text($message);
            return true;
        }
    </script>
</block>
